<template>
    <div id="query" class="py-2">
        <a-row class="w-full">
            <a-col :span="19">
                <a-form v-bind="queryConfig">
                    <a-form-item v-for="form in getFormList" :key="form.key" label="名称" v-bind="form" :name="form.key">
                        <a-input v-if="form.type === 'input'" v-model:value="getFormValue[form.key]"
                            :placeholder="`请输入${form.label}查询`"></a-input>
                        <a-select v-if="form.type === 'select'" v-model:value="getFormValue[form.key]"
                            :placeholder="`请输入${form.label}查询`" defaultActiveFirstOption>
                            <a-select-option v-for="option in form.options" :key="option.label" :value="option.value">{{ option.label }}</a-select-option>
                        </a-select>

                        <a-cascader v-if="form.type === 'cascader'" v-model:value="getFormValue[form.key]"
                        :placeholder="`请输入${form.label}查询`" :options="form.options" />
                    </a-form-item>
                </a-form>
            </a-col>

            <a-col :span="4" :offset="1">
                <a-button type="primary" @click.prevent="onSubmit" :icon="h(SearchOutlined)">查询</a-button>
                <a-button style="margin-left: 10px" @click="resetFields" :icon="h(SyncOutlined)">重置</a-button>
            </a-col>
        </a-row>

    </div>
</template>

<script setup lang="ts">
import { SearchOutlined, SyncOutlined } from '@ant-design/icons-vue';
import { h } from 'vue'
import { CustomQueryProps } from './types';
import { useInitialization } from './hook/useInitialization';

const emit = defineEmits(['submit', 'reset'])

const props = withDefaults(defineProps<CustomQueryProps>(), {})
const innerPropsRef = ref()
const getProps = computed(() => {
    return { ...props, ...unref(innerPropsRef) }
})
const setProps = (props: Partial<CustomQueryProps>) => {
    innerPropsRef.value = { ...unref(innerPropsRef), ...props } as CustomQueryProps
}

const { getFormValue, setFormValue, resetFormValue } = useInitialization(getProps)

const queryConfig = computed(() => {
    return {
        layout: 'inline'
    }
})

const getFormList = computed((): any[] => {
    return props.formColumns || []
})

const onSubmit = () => {
    emit('submit', unref(getFormValue))
}
const resetFields = () => {
    resetFormValue()
    emit('reset', unref(getFormValue))
}
</script>

<style scoped lang="scss">
@media (max-width: 1410px) {
    :deep(.ant-form-item) {
        width: calc((100% - 32px) / 2) !important;

        &:nth-child(n+3) {
            margin-top: 12px;
        }
    }
}

:deep(.ant-form) {
    .ant-form-item {
        width: calc((100% - 48px) / 3);
        flex-wrap: nowrap;

        .ant-form-item-label {
            min-width: 80px;
            text-align: left;
        }

        .ant-input,
        .ant-select {
            min-width: 200px;
        }
    }

    .ant-form-item:nth-child(n+4) {
        margin-top: 12px;
    }
}
</style>